<template>
  <div id="container">
          <div id="viewDiv"></div>
          <el-main id="tool_panel" :style="{backgroundColor:store.state.theme==='dark'?'rgb(50,50,50)':'rgb(240,240,240)'}">
              <div v-html="html"></div>
              <el-text size="large" style="white-space: pre-line;color:gray;">{{message}}</el-text>
            </el-main>
    </div>
</template>

<script setup>
import {深色底图,灰色底图} from '../底图库'
import {onMounted,ref} from 'vue'
import Map from "@arcgis/core/Map.js"
import MapView from '@arcgis/core/views/MapView'
import { useStore } from 'vuex'
const message=ref('')
const store=useStore()//加载store对象
const html=`<el-text style="color:gray">当前坐标: </el-text>`
var map,view
onMounted(()=>{
    map=new Map({
            basemap:{
                    baseLayers:[]
            }
    })
    switch(store.state.theme){
            case "dark":
                    map.basemap.baseLayers.add(深色底图) 
                    break
            case "light":
                    map.basemap.baseLayers.add(灰色底图)
                    break
    }
    view=new MapView({
            map:map, container:"viewDiv", zoom:2, 
            constraints:{
                    rotationEnabled:false,
                    maxScale:1300
            }
    })
    view.ui.remove(["zoom","attribution"])
    view.on("pointer-move",(event)=>{
        var point=view.toMap({x:event.x,y:event.y})
        message.value=`X坐标:${point.x.toFixed(3)} \n Y坐标:${point.y.toFixed(3)}`
    })
})
</script>

<style scoped>
    #viewDiv,#container{
            height:100%;width:100%;padding:0;margin:0;
    }
    #tool_panel{
        position:absolute;top:15px;  left:15px;
        box-shadow:0 0 5px gray;
        border-radius:2px;
        width:200px;
        
    }
    el-text{
        white-space: pre-line;
    }
</style>
